<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LogViewer</title>

    <!-- Bootstrap 5 CSS -->
    <link th:href="@{/static/bootstrap/5.3.2/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/font-awesome/6.4.0/css/all.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/static/bootstrap/5.3.2/css/bootstrap-icons.min.css}">

    <!-- CodeMirror 5 CSS -->
    <link th:href="@{/static/codemirror/5.65.18/lib/codemirror.css}" rel="stylesheet"/>
    <link th:href="@{/static/codemirror/5.65.18/addon/search/matchesonscrollbar.css}" rel="stylesheet"/>
    <link th:href="@{/static/codemirror/5.65.18/theme/idea.css}" rel="stylesheet"/>

    <!-- Prism.js CSS -->
    <!--<link th:href="@{/static/prism/prism.css}" rel="stylesheet"/>-->

</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
        <span class="navbar-brand">LogViewer</span>
        <div class="d-flex">
            <div class="form-check form-switch text-light me-3">
                (c) Powered by Moshow ( <a href="https://zhengkai.blog.csdn.net/">CSDN</a> | <a href="https://github.com/moshowgame/">GITHUB</a> )
            </div>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row mt-3">
        <!-- 侧边栏 -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <p id="fileName"></p>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush" id="fileListSidebar"></ul>
                </div>
            </div>
        </div>
        <!-- 主编辑器区域 -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-header">
                    <label>文件名</label><input type="text" id="fileNamePattern" class="form-control ms-3" placeholder="匹配文件名" th:value="${fileNamePattern}">
                    <label>包含文本</label><input type="text" id="keyWord" class="form-control ms-3" placeholder="关键字" th:value="${keyWord}">
                    <label>查询范围(天数)</label><input type="number" id="days" class="form-control ms-3" placeholder="天数" min="1" max="999" value="1">
                    <input type="button" id="searchBtn" class="form-control ms-3 btn btn-outline-primary" value="搜索">
                </div>
                <div class="card-body p-0 d-flex flex-column">
                    <input type="text" id="searchInput" class="form-control ms-3" placeholder="搜索日志内容(高亮显示)">
                    <div class="flex-grow-1">
                        <!-- 替换 <pre> 为 <textarea> -->
                        <textarea id="logEditor" style="height: 100%; border-left: 1px solid #ddd;"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 脚本依赖 -->
<script th:src="@{/static/jquery/3.7.1/jquery.min.js}"></script>
<script th:src="@{/static/bootstrap/5.3.2/js/bootstrap.bundle.min.js}"></script>

<!-- CodeMirror 5 JavaScript -->
<script th:src="@{/static/codemirror/5.65.18/lib/codemirror.js}"></script>
<script th:src="@{/static/codemirror/5.65.18/addon/mode/loadmode.js}"></script>
<script th:src="@{/static/codemirror/5.65.18/mode/verilog/verilog.js}"></script>
<script th:src="@{/static/codemirror/5.65.18/addon/search/search.js}"></script>
<script th:src="@{/static/codemirror/5.65.18/addon/search/searchcursor.js}"></script>
<script th:src="@{/static/codemirror/5.65.18/addon/scroll/annotatescrollbar.js}"></script>
<script th:src="@{/static/codemirror/5.65.18/addon/search/matchesonscrollbar.js}"></script>

<!-- Prism.js JavaScript -->
<!--<script th:src="@{/static/prism/prism.js}"></script>-->

<script th:inline="javascript">
    $(function() {
        const readUrl = /*[[ @{/read} ]]*/ '';
        const listPlusUrl = /*[[ @{/listPlus} ]]*/ '';
        const filePath = /*[[${filePath}]]*/ '';
        const fileNamePattern = /*[[${fileNamePattern}]]*/ '';
        const keyWord = /*[[${keyWord}]]*/ '';
        $('#fileName').html('<i class="bi bi-folder2-open"></i> '+filePath);
        let originalContent = "";

        // 初始化CodeMirror 5编辑器
        const editor = CodeMirror.fromTextArea(document.getElementById('logEditor'), {
            lineNumbers: true,
            // 确保 mode 设置正确
            mode: 'verilog',
            // mode: 'text/x-log',
            theme: 'idea',
            readOnly: true,
            // 添加自动高度配置
            viewportMargin: Infinity,
            autoRefresh: true
        });
        // 添加窗口resize监听
        window.addEventListener('resize', () => editor.refresh());
        // 搜索文本高亮功能
        $('#searchInput').on('input', function() {
            const query = $(this).val();
            if (query) {
                editor.getWrapperElement().querySelectorAll('.CodeMirror-searching').forEach(el => el.classList.remove('CodeMirror-searching'));
                const cursor = editor.getSearchCursor(query);
                while (cursor.findNext()) {
                    editor.markText(cursor.from(), cursor.to(), { className: 'highlight' });
                }
            } else {
                editor.getWrapperElement().querySelectorAll('.CodeMirror-searching').forEach(el => el.classList.remove('CodeMirror-searching'));
            }
        });

        // 搜索按钮点击事件
        $('#searchBtn').click(function() {
            $.ajax({
                url: listPlusUrl,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ 
                    filePath: filePath, 
                    fileNamePattern: $('#fileNamePattern').val(), 
                    keyWord: $('#keyWord').val(),
                    days: $('#days').val() // 新增天数参数
                }),
                success: function(response) {
                    renderFileListSidebar(response.data);
                },
                error: function(error) {
                    console.error('Error searching files:', error);
                }
            });
        });

        // 渲染侧边栏文件列表
        function renderFileListSidebar(files) {
            const $fileListSidebar = $('#fileListSidebar').empty();
            files.forEach(file => {
                const $listItem = $('<li class="list-group-item list-group-item-action">' + file.name + '</li>');
                $listItem.click(function() {
                    $.ajax({
                        url: readUrl,
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({ filePath: filePath + "\\" + file.name }),
                        success: function(response) {
                            originalContent = response.data;
                            editor.setValue(originalContent); // 更新CodeMirror内容
                            editor.refresh();
                        },
                        error: function(error) {
                            console.error('Error reading file:', error);
                        }
                    });
                });
                $fileListSidebar.append($listItem);
            });
        }
    });
</script>
<style>
    .highlight {
        background-color: yellow;
    }
    /* 添加CSS */
    .CodeMirror {
        flex: 1;
        min-height: calc(90vh - 180px); /* 动态获取浏览器的高度然后减去200px */
    }
</style>
</body>
</html>